<template>
  <a-card :bordered="false">
    <!-- 本示例只列举了基本用法，具体详情请查看VxeTableListMixin.js -->
    <!-- 查询区域 -->
    <div>
      <a-form @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="12">
            <a-form-item label="编码" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="queryParam.dictCode" placeholder="请输入编码" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="12">
            <a-form-item label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="queryParam.dictName" placeholder="请输入名称" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item>
              <a-button type="primary" icon="search" @click="searchQuery()">查询</a-button>
              <a-button type="primary" icon="reload" style="margin-left: 8px" @click="searchReset()">重置</a-button>
              <a style="margin-left: 8px" @click="handleToggleSearch">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      <vxe-grid
        id="VxeTableList"
        ref="vxeTable"
        v-bind="gridOptions"
        :row-config="{keyField:'id'}"
        v-on="listeners"
      >
        <template v-slot:toolbar_tools>
          <div >
            <a-button type="primary" icon="sync" ghost class="theme--perfect-button">自定义右侧按钮</a-button>
          </div>
        </template>
        <template v-slot:buttons_tools>
          <div >
            <a-button type="primary" icon="sync" ghost class="theme--perfect-button">自定义左侧按钮</a-button>
          </div>
        </template>
        <template #action="{ row }">
          <template>
            <a @click="handleEdit(row)">编辑</a>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link">
                更多 <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="handleDetail(row)">详情</a>
                </a-menu-item>
                <a-menu-item>
                  <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                    <a>删除</a>
                  </a-popconfirm>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </template>
      </vxe-grid>
    </div>
    <!-- table区域-end -->
    <auth-modal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import AuthModal from './modules/AuthModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
export default {
  name: 'VxeTableList',
  components: {
    AuthModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      url: {
        list: '/sys/dict/tree/page', // 查询接口
        delete: '', // 删除接口
        deleteBatch: '' // 批量删除接
      },
      fieldList: [// 高级查询组件参数
        { type: 'input', value: 'dictCode', text: '编码' },
        { type: 'input', value: 'dictName', text: '名称' },
        { type: 'date', value: 'createTime', text: '创建时间', props: { valueFormat: 'YYYY-MM-DD HH:mm:ss' }}
      ],
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '编码',
          field: 'dictCode',
          sortable: true
        },
        {
          title: '名称',
          field: 'dictName',
          sortable: true
        },
        {
          title: '默认值',
          field: 'dictDefaultValue'
        },
        {
          title: '描述',
          field: 'dictDesc'
        },
        {
          title: '类别',
          field: 'dictType',
          slots: { default: ({ row }) => {
            return row.dictType === '1' ? '系统字典' : '业务字典'
          } }
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 170
        }
      ],
      toolbarConfig: {
        slots: {
          // tools: 'toolbar_tools',
          buttons: 'buttons_tools'
        },
        buttons: [// 该属性与slots.buttons只能同时配置一个
          { // 自定义左侧按钮
            buttonRender: { name: 'VxeToolbarButton', props: { title: '自定义按钮', icon: 'printer' }, events: { click: this.handleLeft }}
          }
        ],
        tools: [ // 该属性与slots.tools只能同时配置一个
          { // 高级查询组件
            toolRender: {
              name: 'VxeToolbarSearch',
              props: {
                fieldList: [
                  { type: 'input', value: 'dictCode', text: '编码' },
                  { type: 'input', value: 'dictName', text: '名称' }
                ]
              },
              events: { click: this.handleSuperQuery }
            }
          },
          { // 自定义右侧tool
            toolRender: { name: 'VxeToolbarTool', props: { icon: 'printer' }, events: { click: this.handleRight }}
          }
        ]
        // import: false, //设置导入按钮的显示隐藏
        // export: false
      },
      elementId: 'erp:DictList:export', // 导出按钮组件标识,也可以在auth对象中定义，两个选择其中一个定义即可
      auth: {
        permi: {
          export: 'erp:DictList:export'
        }
      },
      proxyConfig: {
        autoLoad: false// 初始化不加载数据，需要手动触发数据加载
      }
    }
  },
  methods: {
    handleLeft() {

    },
    handleRight() {

    }
  },
  mounted() {
    setTimeout(() => {
      this.loadData() // 手动触发数据加载
    }, 2000)
  }
}
</script>

